<template>
    <div>
        <ElConfigProvider :locale="locale">
            <el-date-picker clearable class="date_range" :style="{width:width+'px'}" :format="format" :value-format="valueformat" v-model="innerValue" 
                :type="type" :start-placeholder="sph" :end-placeholder="eph" :disabled-date="disabledDate" />
        </ElConfigProvider>
    </div>
</template>

<script setup>
import { ref,watch,computed } from 'vue'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
const locale = ref(zhCn); //日期框必须要用这个包，所以很麻烦，写个组件封装起来

const emit = defineEmits(['update:start','update:end']) //此处要完全对应，采用固定的update:prop属性
const props = defineProps({
    start: { type: String, require: true },
    end: { type: String, require: true },
    sph: { type: String, default: "选择日期" },
    eph: { type: String, default: "选择日期" },
    width:  { type: Number, default: 226 },
    type : { type: String, default: "daterange" },
    format: { type: String, default: "YYYY-MM-DD" },
    valueformat: { type: String, default: "YYYY-MM-DD" },
    disabledDate: { type: Function, require: false},
})
// let obj = reactive({
//     innerValue: [props.start, props.end],
// })
let innerValue = computed({
    get() { return [props.start, props.end] },
    set(val) {
        if(val){
            // props.start = val[0];
            // props.end = val[1];
            emit('update:start', val[0])
            emit('update:end', val[1])
        }else{
            // props.start = null
            // props.end = null
            emit('update:start', null)
            emit('update:end', null)
        }
    }
})
// watch(
//     () => props.start,
//     (val) => {
//         emit('update:start', val) //组件里的props是只读的，要想做成双向绑定，必须要加watch事件，并且抛出指定的update:prop属性
//         //外面写法也有变化，不能:value=""，要改为v-model:value=""，就能得到更新后的值
//     }
// )
</script>

<style scoped>
</style>